<template>
  <div class="container-border create-container">
    <el-steps :active="steps.active" align-center finish-status="success" class="p_b20">
      <el-step :title="item" v-for="item of steps.data"></el-step>
    </el-steps>
    <BaseInfo v-if="steps.active===1" :form-options="[{placeholder:''}]"></BaseInfo>
    <Details v-if="steps.active===2"></Details>
    <div class="flex justify-center p_y20">
      <el-button-group>
        <el-button
            type="primary"
            :disabled="steps.active<=1"
            @click="onNextStep(false)"
            icon="el-icon-arrow-left">
          上一步
        </el-button>
        <el-button
            type="primary"
            :disabled="steps.active>=steps.data.length"
            @click="onNextStep(true)">
          下一步<i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {useSteps} from '@/hooks/StepsHooks'
import Details from './createComponents/Details.vue'
import BaseInfo from './createComponents/BaseInfo.vue'

export default defineComponent({
  name: "Create",
  components: {
    Details,
    BaseInfo,
  },
  setup() {
    const stepsOptions = [
      '基本信息',
      '酒店详情',
      '房间信息',
    ];

    return {
      ...useSteps(stepsOptions)
    }
  },

})
</script>

<style lang="scss" scoped>
.create-container {
  padding: 20px;
}
</style>
